<template>
    <el-card v-if="reload" class="xx-card" style="padding: 10px;">
        <el-row>
            <el-col :span="12">
                <vxe-grid ref="xGrid" v-bind="gridOptions" v-on="gridOn">
                    <template #action="{ row }">
                        <el-link
                            type="warning"
                            @click="configRow(row)"
                        >
                            配置
                        </el-link>
                    </template>
                </vxe-grid>
            </el-col>

            <el-col v-if="row" :span="12" style="padding: 10px;">
                <div class="cfg-title">
                    <span>正在配置:{{ row.id }} {{ row.name }}</span>
                    <el-button type="success" size="small" style="margin-left: 410px;" @click="sureConfig">确定</el-button>
                </div>
                <el-transfer
                    v-model="value"
                    filterable
                    :titles="titles"
                    :props="{
                        key: 'id',
                        label: 'name',
                    }"
                    :data="trDatas"
                    @change="change"
                />
            </el-col>
        </el-row>
    </el-card>
</template>

<script setup>
import { vxeGridConfig } from '@/util/vxeTableConfig'
import { reactive, ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import bus from '@/util/bus'
import { ElMessageBox, ElMessage } from 'element-plus'
import { Edit, Share, Box, Search, Plus } from '@element-plus/icons-vue'

/** 穿梭框 */
const titles = ref(['可选项', '已选项'])
const value = ref([])
const reload = ref(true)
const row = ref(null)
const router = useRouter()

const trDatas = ref([])

const configRow = it => {
    axios.post('/download/softwareTypeRelation/detail', { id: it.id })
        .then(res => {
            row.value = res.data.data.detail || it
            trDatas.value = res.data.data.detail.relations || []
            value.value =  trDatas.value.filter(it => it.pitch).map(it => it.id)
        })
}

const sureConfig = () => {
    ElMessageBox.confirm('确定设置该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(() => {
            axios
                .post('/download/softwareTypeRelation/config', { id: row.value.id, stageIds: value.value.join(',') })
                .then(res => {
                    ElMessage({
                        type: 'success',
                        message: '设置成功!' 
                    })
                    reload.value = false
                    nextTick(() => { reload.value = true })
                })
        })
        .catch(error => {
            ElMessage({
                type: 'danger',
                message: '删除失败!' + error
            })
        })
 
}

/** 其他 */

const fApi = ref({})
const xGrid = ref({})
const route = useRouter()
const queryForm = ref({
    name: '',
    status: ''
})

const rule = ref([
    {
        type: 'input',
        title: '名称',
        field: 'name',
        props: {
            clearable: true,
            placeholder: '请输入名称'
        }
    },
    {
        type: 'input',
        title: '等级',
        field: 'level',
        props: {
            clearable: true,
            placeholder: '请输入等级'
        }
    },
    {
        type: 'ElSelectV2',
        field: 'state',
        title: '是否生效',
        props: {
            clearable: true,
            placeholder: '请选择',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '生效',
                    value: 0
                },
                {
                    label: '失效',
                    value: 1
                }
            ]
        }
    },
    {
        type: 'ElButton',
        children: ['搜索'],
        props: { type: 'primary', round: true, icon: Search },
        on: {
            click: () => {
                xGrid.value.commitProxy('reload')
            }
        }
    },
    {
        type: 'ElButton',
        children: ['添加'],
        props: { type: 'success', round: true, icon: Plus },
        on: {
            click: () => {
                route.push('/lx/editLx')
            }
        }
    },
    {
        type: 'ElButton',
        children: ['关联'],
        props: { type: 'info', round: true, icon: Box },
        on: {
            click: () => {
                route.push('/lx/guanlian')
            }
        }
    }
])

const options = ref({
    submitBtn: false,
    resetBtn: false,
    form: {
        inline: true,
        labelPosition: 'right',
        size: 'mini',
        labelWidth: '50px',
        hideRequiredAsterisk: false,
        showMessage: true,
        inlineMessage: false
    }
})

const loadByQuery = (id = 0) => {
    return axios.post('/download/softwareTypeRelation/page', { id })
}

const columns = [
    // { type: 'seq', title: '序号', width: 46 },
    {
        field: 'id',
        title: 'ID',
        treeNode: true
    },
    {
        field: 'name',
        title: '名称'
    },
    // {
    //     field: 'levelName',
    //     title: '等级名称'
    // },
    // {
    //     field: 'stateName',
    //     title: '是否生效'
    // },
    // {
    //     field: 'weight',
    //     title: '权重'
    // },
    {
        field: 'acttion',
        title: '操作',
        slots: {
            default: 'action'
        }
    }
]

const toolbarConfig = {
    // buttons: [
    //   { code: "insert_actived", name: "新增" },
    //   { code: "delete", name: "直接删除" },
    // ],
    // refresh: true,
    // export: true,
    // zoom: true,
    // custom: true
}

const treeConfig = {
    rowField: 'id',
    line: true,
    lazy: true,
    showIcon: true,
    accordion: true,
    trigger: 'row',
    loadMethod: ({ row }) => {
        return new Promise((resolve, reject) => {
            loadByQuery(row.id).then(res => {
                resolve(res.data.data.record.map(it => {
                    it.hasChild = true
                    return it
                }))
            })
        })
    }
}

const gridOptions = reactive({
    ...vxeGridConfig(null),
    proxyConfig: null,
    treeConfig,
    toolbarConfig,
    exportConfig: { types: ['csv'] },
    columns,
    data: []
    //   columns: columns.value,
})

loadByQuery()
    .then(res => {
        gridOptions.data = res.data.data.record.map(it => {
            it.hasChild = true
            it.children = []
            return it
        })
    })

bus.on('reload', () => {
    xGrid.value.commitProxy('reload')
})
onBeforeUnmount(() => {
    bus.off('reload')
})

const gridOn = reactive({})
</script>

<style lang="scss">
.el-transfer-panel__body {
    height: 555px;
}
.cfg-title {
    height: 26px;
    color: #303133;
    size: 26px;
    margin-bottom: 10px;
    display: flex;
}
// .vxe-form--item-content{
//   max-height: 20px;;
// }
</style>
